<template>
  <!-- 运营数据总览 -->
  <div class="app-container">
    <div class="app-wrap">
      <div class="border-line">
        <div class="flexStart">
          <el-form ref="form" :model="listQuery" label-width="80px" class="flexStart marginR20">
            <el-form-item label="" label-width="0">
              <el-radio-group v-model="timeType" size="small" @change="submitQuery">
                <el-radio-button :label="1">本 周</el-radio-button>
                <el-radio-button :label="2">本 月</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="渠道:" label-width="60px">
              <el-select v-model="listQuery.agent_id" placeholder="请选择渠道" filterable >
                <el-option label="全部" value="" ></el-option>
                <el-option :label="'【'+item.value+'】'+item.label" :value="item.value" v-for="(item, index) in channelData" :key="index"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="数据类型:" label-width="90px">
              <el-select v-model="listQuery.word" placeholder="请选择数据类型" filterable >
                <el-option :label="item.label" :value="item.value" v-for="(item, index) in dataDataList" :key="index"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="日期时间:" label-width="90px">
              <el-date-picker is-range v-model="listQuery.dateTime" type="daterange" range-separator="至" start-placeholder="开始日期" 
              end-placeholder="结束日期" class="full-width-input time-box" :default-time="['00:00:00', '23:59:59']" :clearable="false"></el-date-picker>
            </el-form-item>
            <el-button class="marginL10" type="primary" @click.stop="getDataList(),timeType = 0" style="height:40px">查 询</el-button>
          </el-form>
        </div>
        <line-chart id="lineEcharts" ref="lineEcharts" :keyData="keyData" :legendData="legendData" :dataList="dataList"/>
      </div>
    </div>
  </div>
</template>

<script>
import {
  throttle
} from '@/utils/index'
import {
  getOperational,
} from '@/api/statistics'
import LineChart from '@/components/Echarts/lineChart.vue';

export default {
  name: 'overviewOperational',
  components: {
    LineChart,
  },
  data () {
    return {
      channelData: this.$store.state.commonState.channelDataArray,
      dataDataList: [
        {label:'新增代理',value:'agent_create_add'},
        {label:'新增注册',value:'user_create_add'},
        {label:'总充值额度',value:'pay_total_money'},
        {label:'提现总额',value:'withdrawal_total_money'},
        {label:'每日佣金',value:'get_commission_money'},
        {label:'下注总额',value:'bet_total'},
        {label:'有效流水',value:'effective_water'},
        {label:'投注人数',value:'bet_person_num'},
        {label:'损益',value:'game_income'},
        {label:'活跃人数',value:'active_person_num'},
      ],
      listQuery:{
        agent_id:'',
        word:'user_create_add',
        dateTime:[this.$public.getDateWeek('s',0)+' 00:00:00',this.$public.getDateWeek('e',0)+' 23:59:59'],
        start_time:'',
        end_time:'',
      },
      timeType:1,
      keyData: [],
      legendData: [],
      dataList:[]
    }
  },
  created() {
    // this.getDataList()
  },
  activated(){
    this.channelData=this.$store.state.commonState.channelDataArray
    this.getDataList()
  },
  methods: {
    // 运营数据总览
    getDataList: throttle(async function () {
      this.$refs.lineEcharts.getEcharts()
      let that = this,params = JSON.parse(JSON.stringify(that.listQuery));
      that.keyData = []
      that.dataList = []
      that.legendData = []
      if(params.dateTime[0] && params.dateTime[1]){
        params.start_time=that.$public.standardDate(params.dateTime[0]) 
        params.end_time=that.$public.standardDate(params.dateTime[1])
      }else{
        params.start_time=''
        params.end_time=''
      }
      that.dataDataList.forEach(item=>{
        if(item.value==params.word){
          that.legendData.push(item.label)
        }
      })
      const response= await getOperational(params)
      if (response.code == 1) {
        if(response.data.list){
          response.data.list.forEach(item=>{
            item.date=item.date.substring(0,10)
            that.keyData.push(item.date)
          })
          that.keyData=Array.from(new Set(that.keyData));
          // 折线图
          that.dataList=that.echartData(that.legendData,response.data.list)
          that.$nextTick(()=>{
            that.$refs.lineEcharts.getEcharts()
          })
        }
      }else{
        that.$message.error(response.msg)
      }
    }, 3000),
    // 组装数据
    echartData(legendData,data){
      let echartsData=[],word=this.listQuery.word;
      legendData.forEach(second=>{
        let arrData=[];
        data.forEach(item=>{
          if(word=='agent_create_add' || word=='user_create_add'|| word=='bet_person_num'|| word=='active_person_num'){
            arrData.push(item.param_value)
          }else{
            arrData.push(this.$public.mathNumberDivideWan(item.param_value))
          }
        })
        echartsData.push({name:second,data:arrData, type: 'line',showAllSymbol:true})
      })
      return echartsData
    },
    submitQuery(val){
      let that=this;
      that.timeType=val
      if(val==1){
        that.listQuery.dateTime=[this.$public.getDateWeek('s',0)+' 00:00:00',this.$public.getDateWeek('e',0)+' 23:59:59']
      }else{
        that.listQuery.dateTime=[this.$public.getDateMonth('s',0)+' 00:00:00',this.$public.getDateMonth('e',0)+' 23:59:59']
      }
      that.getDataList()
    },
    // 刷新
    refresh: throttle(function () {
      this.listQuery={
        agent_id:'',
        word:'user_create_add',
        dateTime:[this.$public.getDateDay(0)+' 00:00:00',this.$public.getDateDay(0)+' 23:59:59'],
        start_time:'',
        end_time:'',
      },
      this.getDataList()
    }, 3000),
  }
}
</script>

<style lang="scss" scoped>
.border-line{
  padding:10px;
  margin:0 auto 40px;
  background: #F9F9F9;
  border-radius: 5px;
  p{
    font-size: 24px;
    margin-left: 20px;
  }
}
</style>
